@charset"utf-8";
* {
    margin: 0;
    padding: 0;
}

@-webkit-keyframes kugouBg {
    0% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@keyframes kugouBg {
    0% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}
@-webkit-keyframes mouth{
    0%,100%{
        transform: scale(1);
    }
    50%{
        transform: scale(.96);
    }
    
}
@-webkit-keyframes star{
    0%,100%{
        transform: rotate(0deg) scale(1)
    }
    50%{
        transform: rotate(5deg) scale(.96)
    }
}
@-webkit-keyframes lookpeople{
    0%{
        transform: translateY(-200px);
    }
    100%{
        transform: translateY(0px);
    }
}
@-webkit-keyframes car{
    0%,100%{
        transform: rotate(0);
    }
    50%{
        transform:rotate(5deg);
    }
}
@function r($px) {
    @return ($px/40) * 1rem;
}
.web {
    position: relative;
    width:r(936);
    height: r(1680);
    margin: 0 auto;
        overflow: hidden;
        .sharfriend{
            position: absolute;
            width: 100%;
            height: 100%;
            img{
                width: 100%;
            }
        }
        .seconde{
            width: 100%;
            height: 8%;
            position: absolute;
            top: 50%;
            font-size:.75rem;
            display: none;
            color: #000000;
            text-align: center;
        }
    .animate {

        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        bottom: 0;
        background-color: black;
        z-index: 1300;
        .progress {}
        .stars {
            position: absolute;
            margin: auto;
            z-index: 0;
        }
        .protagonist {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 14%;
            margin: auto;
            text-align: center;
            z-index: 99;
            img {
                max-width: 90%;
                max-height: 100%;
            }
        }
        .arrow {
            position: absolute;
            bottom: 11%;
            left: 0;
            right: 0;
            text-align: center;
            img {
                width: 18%;
            }
        }
        .arrows {
            position: absolute;
            bottom: 5%;
            left: 6%;
            color: white;
            font-size:.75rem;
            display: inline-block;
            p {
                display: inline-block;
            }
        }
        .earth {
            position: absolute;
            height: 28%;
            right: 0;
            bottom: -3%;
            text-align: right;
            img {
                height: 100%;
            }
        }
        .pleaseWearEar {
            position: absolute;
            bottom: 0;
            text-align: center;
            left: 0;
            right: 0;
            img {
                width: 25%;
            }
        }
    }
    .pagestar {
        display: none;
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
        background: white;
        z-index: 1000;
            .light {
                    position: absolute;
                    width: 220%;
                    left: 50%;
                    top: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                    img {
                        width: 100%;
                        animation: kugouBg 5s;
                        animation-timing-function: cubic-bezier(1, 1, 1, 1);
                        animation-iteration-count: infinite;
                    }
                }
       
        .kugo_logo {
            position: absolute;
            top: 2%;
            left: 0%;
            right: 2%;
            text-align: right;
            img {
                width: 30%;
            }
        }
        .qingge {
            position: absolute;
            top: 8%;
            left: 2%;
            right: 2%;
            z-index: 666;
            img {
                width: 99%;
            }
        }
        .mouth {
            position: absolute;
            top: 33%;
            text-align: center;
            z-index: 0;
            animation: 1s mouth ease infinite;
            
            img {
                width: 73%;
            }
            .whatsong {
                width: 61%;
                position: absolute;
                top: 33%;
                text-align: right;
                left: 7%;
                img {
                    width: 46%;
                }
            }
        }
        .mans {
            position: absolute;
            bottom: 45%;
            left: 0;
            right: 0;
            height: auto;
            z-index: 6;
            img:first-of-type {
                width: 29%;
                position: absolute;
                left: 6%;
            }
            img:nth-of-type(2) {
                width: 49%;
                position: absolute;
                left: 3%;
            }
            img:nth-of-type(3) {
                width: 49%;
                position: absolute;
                right: 5%;
            }
            .what {
                position: absolute;
                width: 9%;
            }
            .w1 {
                right: 41%;
            }
            .w2{
                right: 45%;
                bottom: -138px;
            }
            .w3 {
                right: 4%;
            }
            .w4 {
                right: 6%;
                bottom: -138px;
            }
        }
        .star_btn {
            width: 100%;
            position: absolute;
            bottom: 2%;
            text-align: center;
            animation: 0.6s star ease infinite;
           
            .btn {
                display: inline-block;
                width: auto;
                img {
                    width: 47%;
                }
            }
        }
    }
    .play_page {
//      display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        left: 0;
        right: 0;
//      overflow: hidden;
        z-index: 800;
        #levelBox {
            width:0px;
            height: 100%;
            position: absolute;
            bottom: 0;
            top: 0;
            .animate1{
                display:block;
            }
            .animate2{
                display:none;
            }
             .animate3{
                display: none;
            }
              .animate4{
                display: none;
            }
              .animate5{
                display: none;
            }
              .animate6{
                display:none;
            }
            .level {
                //              border: 2px solid red;
                //              background-color: skyblue;
                width:r(936);
                height: 100%;
//              float: left;
                position: absolute;
                overflow: hidden;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                .light {
                    position: absolute;
                    width: 220%;
                    left: 50%;
                    top: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                    img {
                        width: 100%;
                        animation: kugouBg 5s;
                        animation-timing-function: cubic-bezier(1, 1, 1, 1);
                        animation-iteration-count: infinite;
                    }
                }
                .threebg {
                    position: absolute;
                    width: 220%;
                    left: 50%;
                    top: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                    img {
                        width: 100%;
                    }
                }
                .sixbg {
                    width: 100%;
                    height: 100%;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .disk {
                    width: 100%;
                    height: 69%;
                    .movieHitSong {
                        position: absolute;
                        width: 89%;
                        height: 11%;
                        top: 3%;
                        img {
                            width: 100%;
                        }
                    }
                    .movieHitSongpeople {
                        position: absolute;
                        width: 100%;
                        height: 20%;
                        top: 17%;
                        img {
                            width: 100%;
                        }
                    }
                    .movieHitSongCityWall {
                        position: absolute;
                        width: 100%;
                        height: 10%;
                        bottom: 34%;
                        img {
                            width: 100%;
                        }
                    }
                    .lightearth {
                        width: 100%;
                        position: absolute;
                        right: 0;
                        top: 0;
                        text-align: center;
                        img {
                            width: 100%;
                        }
                    }
                    .songer {
                        position: absolute;
                        width: 60%;
                        left: 17%;
                        top: 17%;
                        z-index: 20;
                        img {
                            width: 100%;
                        }
                    }
                    .stage {
                        position: absolute;
                        bottom: 38%;
                        width: 96%;
                        img {
                            width: 100%;
                        }
                    }
                    .wow {
                        position: absolute;
                        width: 30%;
                        top: 20%;
                        left: 3%;
                        img {
                            width: 100%;
                        }
                    }
                    .audienceLeft {
                        position: absolute;
                        top: 33%;
                        left: 0;
                        width: 50%;
                        img {
                            width: 100%;
                        }
                    }
                    .wow2 {
                        position: absolute;
                        top: 20%;
                        right: 10%;
                        width: 33%;
                        img {
                            width: 100%;
                        }
                    }
                    .audienceRight {
                        position: absolute;
                        top: 33%;
                        width: 50%;
                        right: 0;
                        img {
                            width: 100%;
                        }
                    }
                    .watchpeos {
                        position: absolute;
                        width: 100%;
                        top: 11%;
                        animation: 2s lookpeople ease ;
                        img {
                            width: 100%;
                        }
                    }
                    .sangBan1 {
                        position: absolute;
                        width: 58%;
                        top: 30%;
                        img {
                            width: 100%;
                        }
                    }
                    .jianfeizaode {
                        position: absolute;
                        width: 63%;
                        right: 2%;
                        top: 16%;
                        z-index: 10;
                        img {
                            width: 100%;
                        }
                    }
                    .sangBan2 {
                        position: absolute;
                        width: 58%;
                        right: 0;
                        top: 40%;
                        z-index: 50;
                        img {
                            width: 100%;
                        }
                    }
                    .feiZhao {
                        position: absolute;
                        width: 27%;
                        left: 5%;
                        bottom: 35%;
                        z-index: 5;
                        img {
                            width: 100%;
                        }
                    }
                    .WCwalls {
                        position: absolute;
                        width: 100%;
                        bottom: 28%;
                        z-index: 0;
                        img {
                            width: 100%;
                        }
                    }
                    .threeYao {
                        position: absolute;
                        width: 66%;
                        left: 5%;
                        top: 5%;
                        animation: 1s mouth ease infinite;
                        img {
                            width: 100%;
                        }
                    }
                    .car {
                        position: absolute;
                        width: 97%;
                        top: 27%;
                        animation: 1s car ease infinite;
                        img {
                            width: 100%;
                        }
                    }
                    .hua {
                        position: absolute;
                        width: 20%;
                        right: 10%;
                        top: 28%;
                        img {
                            width: 100%;
                        }
                    }
                    .five_lig {
                        position: absolute;
                        width: 100%;
                        img {
                            position: absolute;
                            right: -11%;
                            width: 81%
                        }
                    }
                    .oldman {
                        position: absolute;
                        width: 76%;
                        top: 13%;
                        left: 9%;
                        img {
                            width: 100%;
                        }
                    }
                    .juhualeft {
                        position: absolute;
                        width: 27%;
                        top: 39%;
                        img {
                            width: 100%;
                        }
                    }
                    .juhuaright {
                        position: absolute;
                        width: 22%;
                        top: 39%;
                        right: 2%;
                        img {
                            width: 100%;
                        }
                    }
                    .wogeiyou {
                        position: absolute;
                        width: 65%;
                        top: 4%;
                        left: 5%;
                        img {
                            width: 100%;
                        }
                    }
                    .man {
                        position: absolute;
                        width: 84%;
                        top: 29%;
                        left: 10%;
                        img {
                            width: 100%;
                        }
                    }
                    .wuman {
                        position: absolute;
                        width: 40%;
                        top: 15%;
                        right: 5%;
                        img {
                            width: 100%;
                        }
                    }
                }
            }
        }
        .itemBox {
            width: 100%;
            height: 40%;
            position: absolute;
            bottom: 2%;
            .item {
                position: absolute;
                left: 2%;
                right: 23%;
                height: 20%;
                font-size: 20px;
                text-align: center;
                line-height: 48px;
                padding-left: 2rem;
            }
            .selectA {
                background-image: url(../img/selectA.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                bottom: 53%;
            }
            .selectB {
                background-image: url(../img/selectB.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                bottom: 28%;
            }
            .selectC {
                background-image: url(../img/selectC.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                bottom: 5%;
            }
            .mouthtime {
                position: absolute;
                width: 17%;
                height: 26%;
                right: 2%;
                bottom: 45%;
                .time {
                    height: 90%;
                    position: absolute;
                    width: 100%;
                    font-size:.75rem;
                    line-height:3.5rem;
                    color: #241c18;
                    background-image: url(../img/smallMouth.png);
                    background-repeat: no-repeat;
                    background-size: 100% auto;
                }
            }
        }
    }
    
    .paihan {
        display: none;
         width:r(936);
    height: r(1680);
        background-image: url(../img/user_bg.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .titel {
            width: 100%;
            .top {
                position: absolute;
                width: 39%;
                height: 9%;
                margin-top: 2%;
                margin-left: 2%;
                background-image: url(../img/userint.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                .touxiang {
                    position: absolute;
                    width: 27%;
                    left: 4%;
                    top: 10%;
                    img {
                        width: 100%;
                    }
                }
                span {
                    position: absolute;
                    top: 29%;
                    left: 42%;
                    width: 50%;
                    font-size: 20px;
                }
            }
            .KuGouLog {
                position: absolute;
                right: 4%;
                top: 3%;
                width: 38%;
                text-align: right;
                img {
                    width: 100%;
                }
            }
        }
        .gloa {
            position: absolute;
            width: 35%;
            top: 11%;
            left: 35%;
            img {
                width: 100%;
            }
        }
        .info {
            position: absolute;
            width: 30%;
            height: 5%;
            text-align: center;
            line-height: 35px;
            font-size: 15px;
            background-image: url(../img/info.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            top: 34%;
            left: 40%;
        }
        .shijin {
            position: absolute;
            width: 99%;
            height: 10%;
            text-align: center;
            line-height: 30px;
            font-size: .75rem;
            background-image: url(../img/text.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            top: 40%;
        }
        .changeagain {
            position: absolute;
            width: 39%;
            height: 5%;
            left: 8%;
            text-align: center;
            line-height: 24px;
            font-size: 0.75rem;
            background-image: url(../img/buttonleft.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            top: 53%;
            z-index: 9999;
        }
        .share {
            position: absolute;
            width: 39%;
            height: 5%;
            right: 8%;
            text-align: center;
            line-height: 24px;
            font-size: .75rem;
            background-image: url(../img/buttonright.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            top: 53%;
        }
        .paiming_title {
            position: absolute;
            width: 50%;
            left: 30%;
            bottom: 24%;
            img {
                width: 100%;
            }
        }
        .paiming_bg {
            position: absolute;
            width: 85%;
            height: 23%;
            right: 8%;
            bottom: 2%;
            text-align: center;
            line-height: 35px;
            font-size: 15px;
            background-image: url(../img/paiming_bg.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            .star {
                width: 14%;
                margin-left: 2%;
                img {
                    width: 100%;
                }
            }
            .star1 {
                width: 14%;
                margin-left: 2%;
                img {
                    width: 100%;
                }
            }
        }
    }
}
@media only screen and(min-width:320px)and(max-width:375px) {
    .web {
        width: 320px;
        height: 568px;
    }
    .web .play_page #levelBox .level {
        width: 320px;
        height: 568px;
    }
    .web .paihan {
        width: 320px;
        height: 568px;
    }
}
//@media only screen and (min-width:360px)and(max-width:411px) {
//  .web {
//      width: 407px;
//      height:730px;
//  }
//  .web .play_page #levelBox .level {
//      width:407px;
//      height:730px;
//  }
//  .web .paihan {
//      width:407px;
//      height:730px;
//  }
//}